<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.4.8/dist/g6.min.js"></script>
</head>
<body>
  <div id="g6-chart"></div>
  <script>
    const data = {
      // 点集
      nodes: [
        {
          id: 'node1', // String， 该节点存在则必须，节点的唯一标识
          x: 100, // Number, 可选，节点位置的x值
          y: 200, // Number, 可选，节点位置的y值
          label: '起始点', // 节点文本
          size: 60, // 元素的尺寸
          labelCfg: { // 标签配置属性
            position: 'center', // 标签的属性，标签在元素中的位置
            style: {
              fontSize: 12, // 标签的文字大小
              fill: '#ffffff', // 标签的文字颜色
            }
          },
          style: { // 包裹样式属性的字段 style 与其他属性在数据结构上并行
            fill: '#ff0000', // 样式属性，元素的填充色
            stroke: '#888', // 样式属性，元素的描边色
            lineWidth: 1, // 节点描边粗细
          }
        },
        {
          id: 'node2',
          x: 300,
          y: 200,
          label: '目标点1',
          size: 80,
          labelCfg: {
            position: 'center',
            style: {
              fontSize: 12,
              fill: '#ffffff'
            }
          },
          style: {
            fill: '#333',
            stroke: '#ccc',
            lineWidth: 2
          }
        },
        {
          id: 'node3',
          x: 500,
          y: 200,
          label: '目标点2',
          size: 100,
          labelCfg: {
            position: 'center',
            style: {
              fontSize: 12,
              fill: '#ffffff'
            }
          },
          style: {
            fill: 'green',
            stroke: '#ccc',
            lineWidth: 2
          }
        }
      ],
      // 边集
      edges: [
        {
          source: 'node1', // String，必须，起始点 id
          target: 'node2', // String, 必须， 目标点 id
          label: '连接线1' // 边的文本
        },
        {
          source: 'node2',
          target: 'node3',
          label: '连接线2'
        }
      ]
    };

    const graph = new G6.Graph({
      container: 'g6-chart', // String | HTMLElement，必须，在step 1 中创建的容器id或容器本身
      width: 800, // Number，必须，图的宽度
      height: 500, // Number, 必须，图的高度
    });

    graph.data(data); // 读取 Step2 中的数据源到图上
    graph.render(); // 渲染图
  </script>
</body>
</html>